$async-action-preview: (
);

@include b(async-action-preview) {
  @include set-component-css-var('async-action-preview', $async-action-preview);
  height: 100%;
  @include flex(column);
  padding: getCssVar(spacing, tight);

  @include e(title){
    font-size: 18px;
    font-weight: bold;
  }

  .el-form-item{
    margin: 0;
  }
  .el-form-item__label,.el-form-item__content{
    font-weight: bold;
  }

}

@include b(async-action-preview-header) {
  @include flex(row, space-between, center);
  height: 48px;
  padding: getCssVar(spacing, tight);
  border-bottom: 1px solid getCssVar(color, border);

}

@include b(async-action-preview-time) {
  padding: getCssVar(spacing, tight);
}

@include b(async-action-preview-count) {
  padding: getCssVar(spacing, tight);
  @include flex(row, space-between, center);
  height: 48px;

}

@include b(async-action-preview-detail) {
  flex-grow: 1;
  overflow: auto;
  border-top: 1px solid getCssVar(color, border);
}

@include b(async-action-preview-detail-item) {
  @include flex(row, space-between, center);
  height: 72px;
  padding: 12px getCssVar(spacing, base);
  border-bottom: 1px solid getCssVar(color, border);

  @include e(index){
    margin-right: 16px;
    height: 40px;
    font-size: 20px;
    text-align: center;
    line-height: 40px;
    width: 40px;
    border-radius: 0;
    background-color: getCssVar(color,primary);
    color: getCssVar(color, primary, text);
  }

  @include e(error){
    height: 100%;
    flex-grow: 1;
    text-align: left;
    @include flex(column, space-between, flex-start);
  }

  @include e(error-reason){
    color: getCssVar(color, text, 1);
  }
}
